.crate-info {
    @media only screen and (min-width: 890px) {
        display: grid;
        grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
    }
}

.docs {
    --shadow: 0 2px 3px light-dark(hsla(51, 50%, 44%, .35), #232321);

    margin-bottom: var(--space-l);
    padding: var(--space-m) var(--space-l);
    background-color: light-dark(white, #141413);
    border-radius: var(--space-3xs);
    box-shadow: var(--shadow);

    @media only screen and (max-width: 550px) {
        margin-left: calc(var(--main-layout-padding) * -1);
        margin-right: calc(var(--main-layout-padding) * -1);
        border-radius: 0;
    }

    @media only screen and (min-width: 890px) {
        margin-bottom: 0;
    }
}

.no-readme, .readme-error {
    padding: var(--space-l) var(--space-s);
    text-align: center;
    font-size: 20px;
    font-weight: 300;
    overflow-wrap: break-word;
    line-height: 1.5;

    code {
        font-size: 18px;
        font-weight: 500;
    }
}

.retry-button {
    display: block;
    text-align: center;
    margin: var(--space-s) auto 0;
}

.placeholder-title {
    width: 30%;
    height: 25px;
    margin: var(--space-s) 0 var(--space-m);
    border-radius: var(--space-3xs);
    opacity: 0.6;
}

.placeholder-subtitle {
    width: 50%;
    height: 20px;
    margin: var(--space-l) 0 var(--space-m);
    border-radius: var(--space-3xs);
    opacity: 0.6;
}

.placeholder-text {
    width: 100%;
    height: 16px;
    margin-top: var(--space-xs);
    border-radius: var(--space-3xs);
    opacity: 0.3;
}

.sidebar {
    @media only screen and (min-width: 890px) {
        margin-top: var(--space-m);
        margin-left: var(--space-m);
    }
}

.crate-downloads {
    display: flex;
    flex-wrap: wrap;
    margin-top: var(--space-l);
    border-top: 5px solid var(--gray-border);

    h3 { width: 100%; }
}

.stats {
    flex-grow: 7;
    display: flex;
    flex-wrap: wrap;
}

.stat {
    border-left: 1px solid var(--gray-border);
    padding: var(--space-s) var(--space-m);
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    flex-grow: 1;

    .num {
        font-size: 160%;
        font-weight: bold;
        margin-bottom: var(--space-3xs);
    }

    .num__align {
        position: relative;
        bottom: 0.4rem;
    }
}

.graph {
    flex-grow: 10;
    width: 100%;
    margin: var(--space-xs) 0 var(--space-m);

    h4 {
        color: var(--main-color-light);
        float: left;
    }

    @media only percy {
        display: none;
    }
}

.graph-data {
    clear: both;
}

.toggle-stacked {
    float: right;
    margin-top: calc(1.33em - 10px);
    margin-bottom: calc(1.33em - 10px);

    .trigger {
        background-color: var(--main-bg-dark);
        font-size: 85%;
        padding: 10px;
        border: none;
        border-radius: 5px;

        .trigger-label {
            min-width: 65px;
        }
    }

    .dropdown-button {
        background: none;
        border: 0;
    }
}

/* alerts */
:global(.markdown-alert) {
    --fg-color-note: #4494f8;
    --fg-color-tip: #3fb950;
    --fg-color-important: #ab7df8;
    --fg-color-warning: #d29922;
    --fg-color-caution: #f85149;

    padding: 0.5rem 1rem;
    margin-bottom: 1rem;
    color: inherit;
    border-left: .25em solid var(--gray-border);

    & > :first-child {
        margin-top: 0;
    }

    & > :last-child {
        margin-bottom: 0;
    }

    :global(.markdown-alert-title) {
        display: flex;
        font-weight: 500;
        align-items: center;
        line-height: 1;
    }

    & > :global(.markdown-alert-title)::before {
        content: '';
        margin-right: .5rem;
        background-color: var(--gray-border);
        width: 1em;
        height: 1em;
    }

    &:global(.markdown-alert-note) {
        border-left-color: var(--fg-color-note);

        & > :global(.markdown-alert-title) {
            color: var(--fg-color-note);

            &:before {
                mask: url("/assets/alert-note.svg");
                background-color: var(--fg-color-note);
            }
        }
    }

    &:global(.markdown-alert-tip) {
        border-left-color: var(--fg-color-tip);

        & > :global(.markdown-alert-title) {
            color: var(--fg-color-tip);

            &:before {
                mask: url("/assets/alert-tip.svg");
                background-color: var(--fg-color-tip);
            }
        }
    }

    &:global(.markdown-alert-important) {
        border-left-color: var(--fg-color-important);

        & > :global(.markdown-alert-title) {
            color: var(--fg-color-important);

            &:before {
                mask: url("/assets/alert-important.svg");
                background-color: var(--fg-color-important);
            }
        }
    }

    &:global(.markdown-alert-warning) {
        border-left-color: var(--fg-color-warning);

        & > :global(.markdown-alert-title) {
            color: var(--fg-color-warning);

            &:before {
                mask: url("/assets/alert-warning.svg");
                background-color: var(--fg-color-warning);
            }
        }
    }

    &:global(.markdown-alert-caution) {
        border-left-color: var(--fg-color-caution);

        & > :global(.markdown-alert-title) {
            color: var(--fg-color-caution);

            &:before {
                mask: url("/assets/alert-caution.svg");
                background-color: var(--fg-color-caution);
            }
        }
    }
}
